<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>
<body>

	bookName:<input type="text" name="b.bookName"><br>
	price:<input type="number" name="b.price"><br>
	<button id="addBook">addBook</button>
	<table class="table .table-striped">
		<tr><th>id</th><th>bookName</th><th>price</th></tr>
	</table>
	

<script>
$("#addBook").click(function(){
	var bookName=$("input[name$=bookName]").val();
	var price=$("input[name$=price]").val();
	$.ajax(
		{
			url:"addBook",
			method:"POST",
			type:"json",
			data:{"b.bookName":bookName,"b.price":price},
			success:function(d){
				var book=d.b;
				$("<tr>")
				.append($("<td>").text(book.id))
				.append($("<td>").text(book.bookName))
				.append($("<td>").text(book.price))
				.appendTo(".table");
			}
		}		
	);
	
});
</script>

</body>
</html>